<template>
  <div class="page">
    <div class="flv_hls_content" id="flv_hls"></div>
  </div>
</template>
<script>
import Player, { Events } from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import 'xgplayer/dist/index.min.css'
export default {
  name: 'Iframes',
  data() {
    return {
      playerVideo: null,
    }
  },
  created() {
    this.init_load()
  },
  methods: {
    async init_load() {
      if (this.playerVideo != null) {
        await this.playerVideo.destroy()
        this.playerVideo = null
      }
      let plugins = FlvPlugin
      let option = {
        id: 'flv_hls',
        url:
          'https://vsp16play.cucloud.cn:8083/SPd5qG4bNqHD/GSPd5qG4bNqHD-bU3d5q1hH3.flv?sms=ad3e5697539a06d8889a9151&codeType=H264',
        isLive: true,
        autoplay: false,
        plugins: [],
      }
      option.plugins.push(plugins)
      setTimeout(() => {
        this.playerVideo = new Player(option)
        this.playerVideo.on(Events.PLAY, () => {
          console.log('开始')
        })
        this.playerVideo.on(Events.PAUSE, () => {
          console.log('暂停')
          // videoUrl =`${config.getServiceURL('scene')}service/scene/flv2/a1?file=${element.data.url}`
        })
        this.playerVideo.on(Events.ENDED, () => {
          console.log('结束')
        })
        this.playerVideo.on(Events.ERROR, () => {
          console.log('错误')
        })
      }, 10)
    },
  },
}
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: 100px;
  .flv_hls_content {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
